<template>
  <nav aria-label="breadcrumb">
    <ul class="breadcrumb">
      <li
        v-for="(crumb, index) in breadcrumbs"
        :key="index"
        :class="{ 'is-active': crumb.isActive }"
      >
        <!-- 首个面包屑项不进行路由跳转 -->
        <span v-if="index === 0">{{ crumb.name }}</span>
        <router-link v-else :to="crumb.path">{{ crumb.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>  
    
  <script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const breadcrumbs = computed(() => {
  const matched = route.matched;
  // 标记当前活跃的路由项
  const activePath = route.path;

  return matched
    .filter((crumb, index) => index > 0 && crumb.name)
    .map((crumb) => ({
      ...crumb,
      isActive: crumb.path === activePath, // 判断是否为当前活跃页面
    }));
});
</script>  
    
<style lang="scss" scoped>
$breadcrumb-height: 40px;
$breadcrumb-font-size: 16px;
$breadcrumb-color: #6c757d;
$breadcrumb-active-color: #000;
$breadcrumb-hover-color: #0275d8;
$breadcrumb-separator: " / ";
$breadcrumb-separator-margin: 8px;

.breadcrumb {
  width: 100%;
  height: $breadcrumb-height;
  background: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  overflow: hidden;

  li {
    display: flex;
    align-items: center;
    font-size: $breadcrumb-font-size;
    margin-right: $breadcrumb-separator-margin;

    &:last-child {
      margin-right: 0;
    }

    a,
    span {
      color: $breadcrumb-color;
      text-decoration: none;
    }

    a:hover {
      color: $breadcrumb-hover-color;
      //   text-decoration: underline;
      cursor: pointer;
    }

    &.is-active {
      a,
      span {
        color: $breadcrumb-active-color;
        cursor: default;
        text-decoration: none;
      }
    }

    &::after {
      content: $breadcrumb-separator;
      color: $breadcrumb-color;
      margin-left: $breadcrumb-separator-margin;
    }

    &:last-child::after {
      content: none;
    }
  }
}
</style>